<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
const title = ref("优惠券");
const flag = ref(false);
</script>

<template>
  <div class="">
    <view>
      <myTitle :title="title" :ifText="true" />
    </view>
    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 20rpx;
        background-color: #fff;
      "
    >
      <view style="width: 30%">
        <img style="width: 100%" src="/src/static/my/1.png" alt="" />
      </view>
      <view style="width: 70%; margin-left: 20rpx">
        <view style="font-weight: 600">平台通用券</view>
        <view style="margin-top: 10rpx; font-size: 25rpx; color: #d7d7d8">仅限优医平台</view>
        <view style="display: flex; align-items: center; justify-content: space-between">
          <view style="font-size: 25rpx; color: #d7d7d8">2022-12-31到期</view>
          <view>
            <wd-button
              size="small"
              style="color: #87d5cb; background-color: #fff; border: 1px solid #87d5cb"
            >
              立即使用
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 20rpx;
        background-color: #fff;
      "
    >
      <view style="width: 30%">
        <img style="width: 100%" src="/src//static/my/2.png" alt="" />
      </view>
      <view style="width: 70%; margin-left: 20rpx">
        <view style="font-weight: 600">平台通用券</view>
        <view style="margin-top: 10rpx; font-size: 25rpx; color: #d7d7d8">仅限优医平台</view>
        <view style="display: flex; align-items: center; justify-content: space-between">
          <view style="font-size: 25rpx; color: #d7d7d8">2022-12-31到期</view>
          <view>
            <wd-button
              size="small"
              style="color: #87d5cb; background-color: #fff; border: 1px solid #87d5cb"
            >
              立即使用
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <view
      style="
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 20rpx;
        background-color: #fff;
      "
    >
      <view style="width: 30%">
        <img style="width: 100%" src="/src//static/my/3.png" alt="" />
      </view>
      <view style="width: 70%; margin-left: 20rpx">
        <view style="font-weight: 600">平台通用券</view>
        <view style="margin-top: 10rpx; font-size: 25rpx; color: #d7d7d8">仅限优医平台</view>
        <view style="display: flex; align-items: center; justify-content: space-between">
          <view style="font-size: 25rpx; color: #d7d7d8">2022-12-31到期</view>
          <view>
            <wd-button size="small" :class="flag ? 'active' : 'actives'">
              {{ flag ? " 立即使用" : "已过期" }}
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<style lang="scss" scoped>
:deep() {
  .active {
    color: #87d5cb !important;
    background-color: #fff !important;
    border: 1px solid #87d5cb !important;
  }

  .actives {
    color: #dcdfe2 !important;
    background-color: #f6f7f9 !important;
    border: 1px solid #dde0e2 !important;
  }
}
</style>
